<template>
	<div class="rankingBox">
		<div class="ranking" v-for="item in ranking">
			<p class="title">{{item.name}}</p>
			<div class="rankingBtm">
				<div class="software" v-for="(item1,index) in rankingList">
					<span class="iconfont icon-Tag" :class="'iconfont'+(index+1)"><span class="num">{{index+1}}</span></span>
					<img class="imgs" :src="item1.src" alt="" srcset="">
					<div class="softwareCet">
						<p class="softwareCetTitle">{{item1.name}}</p>
						<p class="tips">
							<span>类别：{{'聊天'}}</span>
							<span class="size">{{item1.size}}</span>
						</p>
					</div>
					<span class="p4">立即下载</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ranking: [{
					name: '每周排行'
				}, {
					name: '每周排行'
				}, {
					name: '每周排行'
				}],
				rankingList: [{
					src: 'https://img14.360buyimg.com/pop/s590x470_jfs/t1/107362/20/24177/90602/6233decdE5627d944/b7194e538e3c8c7a.jpg',
					name: '360安全卫士',
					tips: "一键让电脑运转如飞",
					size: '186.33M',
				}, {
					src: 'https://img14.360buyimg.com/pop/s590x470_jfs/t1/107362/20/24177/90602/6233decdE5627d944/b7194e538e3c8c7a.jpg',
					name: '360安全卫士',
					tips: "一键让电脑运转如飞",
					size: '186.33M',
				}, {
					src: 'https://img14.360buyimg.com/pop/s590x470_jfs/t1/107362/20/24177/90602/6233decdE5627d944/b7194e538e3c8c7a.jpg',
					name: '360安全卫士',
					tips: "一键让电脑运转如飞",
					size: '186.33M',
				}, {
					src: 'https://img14.360buyimg.com/pop/s590x470_jfs/t1/107362/20/24177/90602/6233decdE5627d944/b7194e538e3c8c7a.jpg',
					name: '360安全卫士',
					tips: "一键让电脑运转如飞",
					size: '186.33M',
				}, {
					src: 'https://img14.360buyimg.com/pop/s590x470_jfs/t1/107362/20/24177/90602/6233decdE5627d944/b7194e538e3c8c7a.jpg',
					name: '360安全卫士',
					tips: "一键让电脑运转如飞",
					size: '186.33M',
				}, ]
			};
		},
		mounted() {

		},
		methods: {
			tabsClick(val) {
				this.active = val
			}

		}
	};
</script>

<style>
	.rankingBox {
		margin-top: 60px;
		width: 1200px;
		display: flex;

		.ranking {
			width: 373px;


			.title {
				height: 20px;
				font-size: 20px;
				font-weight: 600;
				color: #333333;
				line-height: 20px;
				padding-bottom: 16px;
				border-bottom: 1px solid #EFEFEF;
			}

			.rankingBtm {
				margin-top: 20px;

				.software {
					cursor: pointer;
					height: 64px;
					margin-top: 12px;
					padding: 8px 0;
					box-sizing: border-box;
		
					display: flex;
					align-items: flex-start;

					&:hover {
						.p4 {
							display: block;
						}
					}

					.iconfont {
						font-size: 24px;
						position: relative;
						width: 24px;
						height: 24px;
						line-height: 24px;

						.num {
							position: absolute;
							left: 8px;
							top: 7px;
							height: 12px;
							font-size: 12px;
							/* font-weight: 600; */
							line-height: 12px;
						}
					}

					.iconfont1 {
						color: #FF3333;

						.num {
							color: #FFFFFF;
						}
					}

					.iconfont2 {
						color: #FF6D34;

						.num {
							color: #FFFFFF;
						}
					}

					.iconfont3 {
						color: #FFB400;

						.num {
							color: #FFFFFF;
						}
					}

					.iconfont4 {
						color: #EFEFEF;

						.num {
							color: #999999;
						}
					}

					.iconfont5 {
						color: #EFEFEF;

						.num {
							color: #999999;
						}
					}

					.imgs {
						width: 48px;
						height: 48px;
						margin-left: 12px;
					}

					.softwareCet {
						margin-left: 16px;

						.softwareCetTitle {
							margin-top: 5px;
							height: 14px;
							font-size: 14px;
							font-weight: 400;

							line-height: 14px;

							&:hover {
								color: #FF3333;
							}
						}
					}

					.tips {
						width: 190px;
						margin-top: 12px;
						height: 12px;
						font-size: 12px;
						color: #666666;
						line-height: 12px;

						.size {
							margin-left: 16px;
						}
					}

					.p4 {
						margin-left: 16px;
						display: none;
						cursor: pointer;
						padding: 6px 8px;
						height: 12px;
						font-size: 12px;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 12px;
						background: #3ACE72;
						border-radius: 4px;


						&:hover {
							background: #60DB8B;
						}

						&:active {
							background: #27A85D;
						}
					}

				}

			}
		}

		.ranking:nth-child(2),
		.ranking:nth-child(3) {
			margin-left: 40px;
		}
	}
</style>